<template>
  <div class="main">
    <div class="left">树组件
      <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        icon-class="el-icon-d-caret"
        highlight-current
        :default-expanded-keys="['1024982867475820033','1024984540818568481']"
        current-node-key="1024985257948084801"
        @node-click="nodeClick"
      />
    </div>
    <div class="right">
      <!-- <div class="right-top">
        <p class="title">作业范围
          <el-popover
            placement="top-start"
            title="点击编辑释放绘制电子围栏功能"
            width="200"
            trigger="hover"
          >
            <div slot="reference">
              <el-button v-if="!isEdit" slot="reference" class="editBtn" @click="isEdit=true">编辑</el-button>
              <template v-else>
                <el-button class="editBtn" @click="isEdit=false">提交</el-button>
                <el-button @click="isEdit=false">取消</el-button>
              </template>
            </div>

          </el-popover>
        </p>
        <div style="margin:10px">
          <span>地区关键词: </span> <el-input v-model="areaSearchInput" style="width:200px" placeholder="请输入地区关键词" />
        </div>
        <div v-if="isEdit">
          <el-button class="startAct" @click="toggle('polyline')">{{ polyline.editing ? '完成绘制' : '开始绘制' }} </el-button>
          <el-button @click="polyline.paths=[]">删除围栏</el-button>
          <el-alert
            title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
            type="warning"
            show-icon
          />
        </div>
        <div class="map">
          <baidu-map
            scroll-wheel-zoom
            :zoom="14"
            class="map"
            :center="center"
            @mousemove="syncPolyline"
            @click="paintPolyline"
            @rightclick="newPolyline"
          >

            <bm-polygon v-for="(path,index) of polyline.paths" :key="index" stroke-color="red" fill-color="#f2c8c5" stroke-style="dashed" :path="path" />
          </baidu-map>
        </div>
      </div> -->
      <MyMap :center="center" />
    </div>
  </div>
</template>

<script>
import { getTreeOrg } from '@/api/manageData'
import MyMap from '@/components/my-map'
export default {
  components: { MyMap },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      isEdit: false,
      polygonData: [],
      // 地图
      areaSearchInput: '', // 地图搜索输入框
      center: '沈阳市和平区'
    }
  },
  watch: {
    areaSearchInput(newValue, oldValue) {
      // 防抖
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log(newValue)
        this.center = newValue
      }, 700)
    }
  },

  async created() {
    // 初始化tree显示
    const res = await getTreeOrg()
    this.treeData = JSON.parse(res.data)
    // 初始化map作业范围显示
    // const mapData = await getWorkRangeAPI({ id: '1024985257948084801', type: 1 })
    // console.log(mapData)
    // this.polygonData = mapData.data.polygon
  },
  methods: {
    nodeClick(obj) {
      this.center = obj.name
    },
    toggle(name) {
      this[name].editing = !this[name].editing
    },
    syncPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    }
  }
}

</script>

<style lang='scss' scoped>
.main{
  height: 100vh;
  display: flex;

  .left{
    width: 200px;
  height: 100vh;
  background-color:#ffffff;
  margin-right: 20px;
  margin-left: 10px;
  }

  .right{
flex: 1;
  margin-right: 20px;
  height: 100%;
  }

//   .right-top{
//   height: 320px;
//   background-color:#ffffff;
//     height: 100vh;
//   }

//   .title{
//     height: 40px;
//     background-color: #fafafa;
//     color: #2a2929;
//     font-weight: 700;
//     font-size: 16px;
//    line-height: 40px;
//    display: flex;
//    justify-content: space-between;
//    padding: 0 20px;
//   }
//   }

//   .map{
//     margin:10px;
//         width: 98%;
//     height: 668px;
//     background-color: #ffffff;

//   }

//   .editBtn{
//     background-color: #e15536;
//     color: #fff;
//     width: 90px;
//     border-radius: 5px;
//     font-weight: 400;
//     border: 1px solid #e15536;
//   }

}

.startAct{
  background: #ffeeeb;
    padding: 10px 20px;
    border: 1px solid #f3917c;
    color: #e15536;
    font-family: PingFangSC,PingFangSC-Regular;
        margin:14px;
}

</style>
